<template>
  <div class="register-wrapper padding-12">

    <div class="register-body">
      <div class="register-form-wrap">
        <van-cell-group :border="false">
          <van-field
            v-model="userPhone"
            type="tel"
            label="+86"
            placeholder="手机号码"
            maxlength="11"
            :error="phoneError"
            :error-message="phoneErrorMsg"
            @blur="phoneBlur"
          />
          <van-field
            v-model="sms"
            center
            clearable
            placeholder="验证码"
            :error="smsError"
            @blur="smsBlur"
          >
            <van-button slot="button" size="small" type="info" round @click="sendSms" :disabled="smsDisabled">{{smsTxt}}</van-button>
          </van-field>
          <van-field
            v-model="password"
            :type="passwordType"
            placeholder="新密码"
            :error="passwordError"
            :error-message="passwordErrorMsg"
            @blur="passwordBlur"
          >
            <template slot="right-icon">
              <div class="close-password-icon" @click="changePasswordType" v-if="isShowPassword">
                <img src="/static/images/close-password-icon.png">
              </div>
              <div class="see-password-icon" @click="changePasswordType" v-if="!isShowPassword">
                <img src="/static/images/see-password-icon.png">
              </div>
            </template>
          </van-field>
          <van-cell></van-cell>
        </van-cell-group>
        <div class="register-btn forget-btn-div">
          <van-button size="large" round class="register-submit-btn" @click="submit">确认</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import { Field, Icon, Button, Checkbox, Cell, CellGroup, Row, Col, Notify } from 'vant'
  export default {
    name: 'ForgetPassword',
    components: {
      [Field.name]: Field,
      [Icon.name]: Icon,
      [Button.name]: Button,
      [Checkbox.name]: Checkbox,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Row.name]: Row,
      [Col.name]: Col
    },
    data () {
      return {
        userPhone: '',
        phoneError: false,
        phoneErrorMsg: '',
        sms: '',
        smsError: false,
        smsDisabled: false,
        smsTxt: '获取验证码',
        password: '',
        passwordError: false,
        passwordErrorMsg: '',
        passwordType:'password',
        isShowPassword:true
      }
    },
    methods: {
      // 手机号验证
      phoneBlur () {
        if (this.userPhone !== '') {
          if (!(/^1[3456789]\d{9}$/.test(this.userPhone))) {
            this.phoneErrorMsg = '手机号格式错误'
            this.phoneError = true
            return false
          } else {
            this.phoneErrorMsg = ''
            this.phoneError = false
            return true
          }
        } else {
          this.phoneErrorMsg = ''
          this.phoneError = true
          return false
        }
      },
      // 发送验证码
      sendSms () {
        if (!this.phoneBlur()) {
          return
        }
        ajax.doAction({
          url: '/sms',
          type: 'POST',
          items: {
            phone: this.userPhone,
            type: 1
          },
          successMsg: {
            isshow: true,
            msg: ''
          },
          successCallback: (data) => {
            // console.log(data)
            if (data.code !== 200) {
              Notify({
                message: data.msg,
                duration: 1000
              })
              return
            }

            Notify({
              message: data.msg,
              duration: 1000,
              background: '#0085ca'
            })
            let time = null
            let count = 60
            this.smsDisabled = true
            time = setInterval(() => {
              count--
              this.smsTxt = `${count}s后重新获取`
              if (count <= 0) {
                clearInterval(time)
                count = 60
                this.smsDisabled = false
                this.smsTxt = '获取验证码'
              }
            }, 1000)
          },
          errorCallback: (data) => {
            console.log('请求失败')
          }
        })
      },
      // 验证码验证
      smsBlur () {
        if (this.sms !== '') {
          this.smsError = false
          return true
        } else {
          this.smsError = true
          return false
        }
      },
      // 密码验证
      passwordBlur () {
        if (this.password !== '') {
          if (!(/^(\w){3,20}$/.test(this.password))) {
            this.passwordErrorMsg = '密码格式错误'
            this.passwordError = true
            return false
          } else {
            this.passwordErrorMsg = ''
            this.passwordError = false
            return true
          }
        } else {
          this.passwordErrorMsg = ''
          this.passwordError = true
          return false
        }
      },
      changePasswordType(){
        this.isShowPassword = !this.isShowPassword
        if(this.isShowPassword){
          this.passwordType = 'password'
        }else{
          this.passwordType = 'text'
        }
      },
    //  提交
      submit () {
        if (!this.phoneBlur()) {
          return
        }
        if (!this.smsBlur()) {
          return
        }
        if (!this.passwordBlur()) {
          return
        }

        ajax.doAction({
          url: '/forget',
          type: 'POST',
          items: {
            username: this.userPhone,
            password: this.password,
            code: this.sms
          },
          successCallback: (data) => {
            // console.log(data)
            if (data.code !== 200) {
              Notify({
                message: data.msg,
                duration: 1000
              })
              return
            }

            Notify({
              message: data.msg,
              duration: 1000,
              background: '#0085ca'
            })
            setTimeout(() => {
              this.$router.push('/login')
            }, 1000)
          },
          errorCallback: (data) => {
            console.log(data)
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
